<{extend name="Public:public0" /}>

<{block name="title"}>ES6 - 简写<{/block}>

<{block name="sidebar"}><{include file="Public:sidebar-Es6" /}><{/block}>

<{block name="content"}>
<div class="content guide with-sidebar components-guide">
<h1>箭头函数</h1>	
<h2 id="基本用法">
	<a href="#基本用法" class="headerlink" title="基本用法" data-scroll="">基本用法</a>
</h2>
<code class="prettyprint linenums">var&nbsp;funcs&nbsp;=&nbsp;value&nbsp;=&gt;&nbsp;value;<br/>//&nbsp;等同于<br/>var&nbsp;funcs&nbsp;=&nbsp;function(value)&nbsp;{<br/>&nbsp;&nbsp;return&nbsp;value;<br/>}<br/><br/>var&nbsp;funcs&nbsp;=&nbsp;()&nbsp;=&gt;&nbsp;value;<br/>//&nbsp;等同于<br/>var&nbsp;funcs&nbsp;=&nbsp;function()&nbsp;{<br/>&nbsp;&nbsp;return&nbsp;value;<br/>}<br/><br/>var&nbsp;funcs&nbsp;=&nbsp;(num1,&nbsp;num2)&nbsp;=&gt;&nbsp;num1&nbsp;+&nbsp;num2;<br/>//&nbsp;等同于<br/>var&nbsp;funcs&nbsp;=&nbsp;function(num1,&nbsp;num2)&nbsp;{<br/>&nbsp;&nbsp;return&nbsp;num1&nbsp;+&nbsp;num2;<br/>}
</code>
<p class="tip">以下必须加 大括号 {}</p>
<code class="prettyprint linenums">var&nbsp;sum&nbsp;=&nbsp;(num2,&nbsp;num2)&nbsp;=&gt;&nbsp;{<br/>&nbsp;&nbsp;return&nbsp;num1&nbsp;+&nbsp;num2;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;多余一条语句<br/>}<br/><br/>var&nbsp;getTempItem&nbsp;=&nbsp;id&nbsp;=&gt;&nbsp;({<br/>&nbsp;&nbsp;id:&nbsp;id,&nbsp;name:&nbsp;'Temp'&nbsp;&nbsp;//&nbsp;返回对象,&nbsp;需加{}<br/>})
</code>
<br>


<h2 id="回调函数特别简洁">
	<a href="#回调函数特别简洁" class="headerlink" title="回调函数特别简洁" data-scroll="">回调函数特别简洁</a>
</h2>
<code class="prettyprint linenums">[1,2,3].map(&nbsp;x&nbsp;=&gt;&nbsp;x&nbsp;*&nbsp;x&nbsp;);<br/>//&nbsp;等同于<br/>[1,2,3].map(&nbsp;function&nbsp;(x)&nbsp;{<br/>&nbsp;&nbsp;return&nbsp;x&nbsp;*&nbsp;x;<br/>}<br/><br/>var&nbsp;result&nbsp;=&nbsp;values.sort(&nbsp;(a,b)&nbsp;=&gt;&nbsp;a&nbsp;-&nbsp;b&nbsp;);<br/>//&nbsp;等同于<br/>var&nbsp;result&nbsp;=&nbsp;values.sort(&nbsp;function(a,b)&nbsp;{<br/>&nbsp;&nbsp;return&nbsp;a&nbsp;-&nbsp;b;<br/>})
</code>

<br><br>


<h2 id="箭头函数中的 this">
	<a href="#箭头函数中的 this" class="headerlink" title="箭头函数中的 this" data-scroll="">箭头函数中的 this</a>
</h2>
<p class="tip">箭头函数中的 <code>this</code> 所指的 是<code>定义时</code>所在的对象, 而不是 <code>使用时</code>所在的对象</p>
<code class="prettyprint linenums">function&nbsp;foo()&nbsp;{<br/>&nbsp;&nbsp;setTimeout(&nbsp;()=&gt;{<br/>&nbsp;&nbsp;&nbsp;&nbsp;console.log('id',&nbsp;this.id);<br/>&nbsp;&nbsp;},100&nbsp;);<br/>}<br/>foo.call(&nbsp;{id:42}&nbsp;)&nbsp;&nbsp;&nbsp;&nbsp;,//&nbsp;输出&nbsp;id:42<br/><br/>var&nbsp;handle&nbsp;=&nbsp;{<br/>&nbsp;&nbsp;id:&nbsp;'123456',<br/>&nbsp;&nbsp;inti:&nbsp;function()&nbsp;{<br/>&nbsp;&nbsp;&nbsp;&nbsp;doucment.addEventListener('click',&nbsp;event=&gt;this.doSomething(event.type),&nbsp;false);<br/>&nbsp;&nbsp;},<br/>&nbsp;&nbsp;doSomething:&nbsp;function(type)&nbsp;{<br/>&nbsp;&nbsp;&nbsp;&nbsp;console.log(&nbsp;&quot;Handling&nbsp;&quot;&nbsp;+&nbsp;type&nbsp;+&nbsp;'&nbsp;for&nbsp;'&nbsp;this.id&nbsp;);&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;this总是指向handle<br/>&nbsp;&nbsp;}<br/>}
</code>

<script type="text/javascript">
	
</script>

<br>
<br>


<h2 id="嵌套的 箭头函数">
	<a href="#嵌套的 箭头函数" class="headerlink" title="嵌套的 箭头函数" data-scroll="">嵌套的 箭头函数</a>
</h2>
<p class="tip">注意<code>return</code>的省略使用</p>
<code class="prettyprint linenums prettyprinted" style=""><ol class="linenums"><li class="L0"><span class="kwd">let</span><span class="pln">&nbsp;insert&nbsp;</span><span class="pun">=</span><span class="pln">&nbsp;</span><span class="pun">(</span><span class="pln">value</span><span class="pun">)</span><span class="pln">&nbsp;</span><span class="pun">=&gt;</span><span class="pln">&nbsp;</span><span class="pun">({</span><span class="kwd">into</span><span class="pun">:</span><span class="pln">&nbsp;</span><span class="pun">(</span><span class="pln">array</span><span class="pun">)</span><span class="pln">&nbsp;</span><span class="pun">=&gt;</span><span class="pln">&nbsp;</span><span class="pun">({</span><span class="pln">after</span><span class="pun">:</span><span class="pln">&nbsp;</span><span class="pun">(</span><span class="pln">afterValue</span><span class="pun">)</span><span class="pln">&nbsp;</span><span class="pun">=&gt;</span><span class="pln">&nbsp;</span><span class="pun">{</span></li><li class="L1"><span class="pln">&nbsp;&nbsp;array</span><span class="pun">.</span><span class="pln">splice</span><span class="pun">(</span><span class="pln">array</span><span class="pun">.</span><span class="pln">indexOf</span><span class="pun">(</span><span class="pln">afterValue</span><span class="pun">)</span><span class="pln">&nbsp;</span><span class="pun">+</span><span class="pln">&nbsp;</span><span class="lit">1</span><span class="pun">,</span><span class="pln">&nbsp;</span><span class="lit">0</span><span class="pun">,</span><span class="pln">&nbsp;value</span><span class="pun">);</span></li><li class="L2"><span class="pln">&nbsp;&nbsp;</span><span class="kwd">return</span><span class="pln">&nbsp;array</span><span class="pun">;</span></li><li class="L3"><span class="pun">}})}),</span></li><li class="L4"><span class="com">//&nbsp;等同于</span></li><li class="L5"><span class="kwd">function</span><span class="pln">&nbsp;insert</span><span class="pun">(</span><span class="pln">value</span><span class="pun">)</span><span class="pln">&nbsp;</span><span class="pun">{</span></li><li class="L6"><span class="pln">&nbsp;&nbsp;</span><span class="kwd">return</span><span class="pln">&nbsp;</span><span class="pun">{</span><span class="kwd">into</span><span class="pun">:</span><span class="pln">&nbsp;</span><span class="kwd">function</span><span class="pun">(</span><span class="pln">array</span><span class="pun">)</span><span class="pln">&nbsp;</span><span class="pun">{</span></li><li class="L7"><span class="pln">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="kwd">return</span><span class="pln">&nbsp;</span><span class="pun">{</span><span class="pln">after</span><span class="pun">:</span><span class="pln">&nbsp;</span><span class="kwd">function</span><span class="pun">(</span><span class="pln">afterValue</span><span class="pun">)</span><span class="pln">&nbsp;</span><span class="pun">{</span></li><li class="L8"><span class="pln">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;array</span><span class="pun">.</span><span class="pln">splice</span><span class="pun">(</span><span class="pln">array</span><span class="pun">.</span><span class="pln">indexOf</span><span class="pun">(</span><span class="pln">afterValue</span><span class="pun">)+</span><span class="lit">1</span><span class="pun">,</span><span class="pln">&nbsp;</span><span class="lit">0</span><span class="pun">,</span><span class="pln">&nbsp;value</span><span class="pun">);</span></li><li class="L9"><span class="pln">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="kwd">return</span><span class="pln">&nbsp;array</span><span class="pun">;</span></li><li class="L0"><span class="pln">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="pun">}}</span></li><li class="L1"><span class="pln">&nbsp;&nbsp;</span><span class="pun">}}</span></li><li class="L2"><span class="pun">}</span></li></ol></code>

<br>
<br>


</div>
<{/block}>
